
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <!-- <script src="js/vue.js"></script> -->

    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">

    <script src="../../js/vue.js"></script>
    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>

</head>
<style>
    #app {
        width: 100%;
        height: 100%;
        min-width: 1000px;
        background-image: url("../../images/bg1.png");
        background-size: 100% 100%;
        background-position: center center;
        overflow: auto;
        background-repeat: no-repeat;
        position: fixed;
        line-height: 100%;
        padding-top: 10px;

    }

    #login_card {
        text-align: center;
        /*让div内部文字居中*/
        /* background-color: #fff; */
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 20px;
        width: 700px;
        height: 85%;
        margin: 60px auto;

    }

    .title {
        height: 70px;
        line-height: 100px;
        font-weight: 650;
        text-align: center;
        font-size: 28px;
        color: #7d7d7d
    }

    .login-form {
        width: 90%;
        height: 70%;
        /*border: solid;*/
        margin: 0 auto;
        float: left;
        padding: 90px 90px 0 0;
    }

    .form-item {
        padding: 15px;
        height: 30px;
        border: solid red;
    }

</style>

<body>

<div id="app">

    <div id="login_card">
        <div class="title">书籍借阅管理系统-用户注册</div>
        <div class="login-form">
            <el-form :model="userInfo" ref="userInfo" :rules="addAddressRules" label-width="100px" class="demo-dynamic">


                <el-form-item label="用户名"
                              prop="username"
                              :rules="[
                              { required: true, message: '用户名不能为空',trigger: 'blur'},{
                              min: 4, max: 20, message: '用户名要大于5位字符，小于20位字符', trigger: 'blur'}
                            ]"   >


                    <el-input placeholder="请输入用户名" prefix-icon="el-icon-user"
                              v-model="userInfo.username" @blur="checkUsername"></el-input>

                    <div v-show="showDivUsername" style="border: solid 0px;text-align: left;font-size: 11px;height: 20px">
                        <span v-if="usernameExist" style="color: red;">用户名已存在</span>
                        <span v-else style="color: green;">用户名可用</span>

                    </div>


                </el-form-item>

                <el-form-item label="密码"
                              prop="password"
                              :rules="[
                              { required: true, message: '密码不能为空'}
                              ,{
                              min: 6, max: 20, message: '密码要大于6位字符，小于20位字符', trigger: 'blur'}
                            ]">

                    <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="userInfo.password"
                              show-password></el-input>

                </el-form-item>


                <el-form-item label="姓名"
                              prop="name"
                              :rules="[
                              { required: true, message: '姓名不能为空'}

                            ]">
                    <el-input placeholder="请输入姓名" prefix-icon="el-icon-user-solid" v-model="userInfo.name"
                             ></el-input>

                </el-form-item>

                <el-form-item
                        prop="email"
                        label="邮箱"
                        :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
                >
                    <el-input v-model="userInfo.email" prefix-icon="el-icon-message"
                              placeholder="请输入邮箱地址"></el-input>
                </el-form-item>


                <el-form-item label="电话号码"
                              prop="phone"
                              placeholder="请输入电话号码"
                              v-model="userInfo.phone"
                              type="number"
                              oninput="if(value.length>11)value=value.slice(0,11)"
                              onkeyup="this.value = this.value.replace(/[^\d]/g,'');"
                              size="large"
                              clearable
                >
                    <el-input v-model="userInfo.phone" prefix-icon="el-icon-message"
                              placeholder="请输入电话号码"></el-input>
                </el-form-item>

                <div style="margin: 50px auto;height: 100px;width: 70%">
                    <el-button type="primary" round style="float: left" @click="submitUserInfo(userInfo)">立即注册</el-button>

                    <el-button type="info" round style="float: right" @click="resetForm">重置信息</el-button>
                    <el-button type="info" round style="float: right" @click="back">返回</el-button>
                </div>


            </el-form>
        </div>
    </div>
</div>

</body>

<script>

    let myVue = new Vue({
        el: '#app',
        data() {
            var checkPhone = (rule, value, callback) => { // 手机号验证
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3456789]\d{9}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {
                // private  Long id;
                // private  String username;
                // private String name;
                // private  String password;
                // private String email;
                // private  String phone;
                userInfo: {
                    username: "",
                    password: "",
                    name: "",
                    email: "",
                    phone: ""
                },
                usernameExist: false,
                showDivUsername:false,
                addAddressRules: {
                    phone: [
                        {required: true, message: "请输入正确手机号", trigger: "blur"},
                        {validator: checkPhone, trigger: 'blur'}
                    ],
                },
            }
        },
        methods: {
            back(){
                location.href="login.html"
            },
            submitUserInfo(userInfo) {
                if (this.userInfo.username==null||this.userInfo.password==null||this.userInfo.name==null||this.userInfo.username==""){
                    this.$message.error('请输入账号密码和用户名！');
                }else{
                    axios.post("/web/user/register",userInfo).then(res=>{
                        if (res.data == 1){
                            this.$message.success('注册成功！');

                            this.$confirm('注册成功，是否跳转到登录界面？', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'success'
                            }).then(() => {
                                // 如果用户点击确定 删除cookie再跳转到登录界面
                                axios({
                                    method:"get",
                                    url:"/web/user/logout"
                                }).then(function (reps){
                                    var i=reps.data
                                    if (i==1){
                                        window.location.href = "../common/login.html";
                                    }
                                })

                            }).catch(() => {
                                // 如果用户点击取消，则关闭提示框
                                this.$message({
                                    type: 'info',
                                    message: '已取消跳转。'
                                });
                            });
                        }
                        else {
                            this.$message.error(res.data || '注册失败！');
                        }

                    })
                }
            },
            resetForm() {
                // 重置表单数据
                this.userInfo = {
                    username: "",
                    password: "",
                    name: "",
                    email: "",
                    phone: ""
                };
                // 清空表单验证状态
                this.$refs.userInfo.resetFields();
            },
            checkUsername() {
                axios.get('/user/checkUsername', { params: { username: this.userInfo.username }})
                    .then(res => {
                        console.log(res.data.code)
                        if (res.data.code === 1){
                            this.showDivUsername = true;
                            this.usernameExist = false;

                        }
                        else {
                            this.usernameExist = true;
                        }

                    })
            }
        }
    })


</script>


</html>